<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./CSS/01.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/02.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/03.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/04.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/05.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/06.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/07.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/08.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/09.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/10.css" /> -->
    <!-- <link rel="stylesheet" href="./CSS/11.css" /> -->
    <link rel="stylesheet" href="./01_CSS/12.css" />
  </head>
  <body>
    <!-- 1. 编写一个 CSS 选择器，选择列表中的第一个列表项，并将其背景颜色设置为浅灰色。 -->
    <!-- <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table> -->

    <!-- 2. 创建一个规则，使得表格中的每一行（除了第一行）的背景颜色交替显示，一行浅灰色，下一行白色。 -->
    <!-- <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table> -->

    <!-- 3. 设计一个样式，使得每个 div 中的最后一个段落的文本颜色为红色。 -->
    <!-- <div>
      <p>你好1</p>
      <p>你好2</p>
    </div>
    <div>
      <p>你好1</p>
      <p>你好2</p>
    </div>
    <div>
      <p>你好1</p>
      <p>你好2</p>
    </div> -->

    <!-- 4. 编写一个选择器，选择表格中的最后一列，并将其背景颜色设置为淡蓝色。 -->
    <!-- <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table> -->

    <!-- 5. 使用结构伪类选择器选中第一个输入框，并将其边框颜色设置为绿色。 -->
    <!-- <div>
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </div> -->

    <!-- 6. 创建一个规则，选中每个父元素下的第二个子元素，并将其字体加粗。 -->
    <!-- <div class="content">
      <div>
        <span>你好1</span>
        <span>你好2</span>
        <span>你好3</span>
      </div>
      <p>
        <span>你好1</span>
        <span>你好2</span>
        <span>你好3</span>
      </p>
      <div>
        <p>你好1</p>
        <p>你好2</p>
        <p>你好3</p>
      </div>
    </div> -->

    <!-- 7. 创建一个规则，选中列表中的偶数行，并将它们的文本颜色设置为蓝色。 -->
    <!-- <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
    </table> -->

    <!-- 8. 编写一个选择器，选择每个表格中第二行第三列的单元格，并将其背景颜色设置为黄色。 -->
    <!-- <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table> -->

    <!-- 9. 设计一个样式，使得每个含有 `.special` 类的段落的下一个兄弟元素（紧邻的下一个同级元素）的背景颜色为粉红色。 -->
    <!-- <div>
      <p class="special">你好1</p>
      <p>你好2</p>
      <p>你好3</p>
      <p>你好4</p>
    </div> -->

    <!-- 10. 创建一个规则，选中列表中倒数第二个列表项，并将其文本颜色设置为橙色。 -->
    <!-- <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul> -->

    <!-- 11. 使用结构伪类选择器选中第一个段落中的第一个字，并将其文本颜色设置为红色。 -->
    <!-- <div>
      <p>你好啊</p>
    </div> -->

    <!-- 12. 编写一个选择器，选择每个表格中最后一行的所有单元格，并将它们的边框设置为实线。 -->
    <!-- <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table> -->
  </body>
</html>
